@import 'styles/settings';
@import 'styles/typography-extends';
@import 'styles/ui.module';

$circle-size: 15px;

.radioInput {
  @extend %bodyText;
  display: flex;
  align-items: center;
  text-transform: capitalize;
  width: 100%;
  height: 30px;
  cursor: pointer;
  padding-left: $mobile-sidebar-side-paddings;

  @media #{$tablet-portrait} {
    padding-left: $sidebar-paddings;
  }

  &:before {
    content: "";
    margin-right: 10px;
    height: $circle-size;
    width: $circle-size;
    border: 1px solid $white;
    border-radius: 50%;
  }
}

.radioButton {
  flex: 1;

  input[type="radio"] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
    // prevent the default radio button from taking up the space
    // display: none would screw up the keyboard navigation, so let's go for opacity
  }

  input[type="radio"]:checked + .radioInput::before {
    background: $biodiversity-gradient-rotated;
    border: 2px solid $white;
  }
}
